<template>
  <div>
    <ExtraTable
      :data="tableData"
      state-field="status"
      :state-method="stateMethod"
      :default-value="{ name: '新的', age: 18, status: 'view' }"
      :add-method="handleAddCallback"
      @add="handleAdd"
      border
      shadow
      style="width: 800px; margin: 50px auto"
    >
      <TableColumn prop="name" label="姓名" :width="160">
      </TableColumn>

      <TableColumn label="年龄" prop="age" v-slot="scope">
        <el-input v-model="scope.row.age" size="small"></el-input>
      </TableColumn>

      <TableColumn label="操作" operation>
        <el-button
          plain
          type="danger"
          size="small"
          @click="handleCheck"
          >审批
        </el-button>
      </TableColumn>

      <table-column extra v-slot="scope">
        <p>
          <ColumnInput
            v-model="scope.row.state"
            :index="scope.index"
          />
        </p>

        <p>
          <ExtraCheckbox
            v-model="scope.row.checkbox"
            label="同意条款"
          ></ExtraCheckbox>
        </p>

        <p>
          <ExtraDatePicker
            v-model="scope.row.datetime"
          ></ExtraDatePicker>
        </p>

        <p>
          <ExtraSelect v-model="scope.row.select">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </ExtraSelect>
        </p>
        <p></p>
        <!-- {{ scope.row }} -->
        <ul>
          <li v-for="r in scope.row" :key="r">{{ r }}</li>
        </ul>
      </table-column>
    </ExtraTable>

    <ExtraTable border :data="extraList">
      <ExtraTableColumn prop="orderCode" label="订单编号">
      </ExtraTableColumn>

      <ExtraTableColumn
        prop="priority"
        label="优先级"
        v-slot="{ row }"
      >
        <ElSelect v-model="row.priority" size="small">
          <ElOption
            v-for="item in extraPriorities"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></ElOption>
        </ElSelect>
      </ExtraTableColumn>

      <ExtraTableColumn prop="needs" label="需求量" v-slot="{ row }">
        <ElInput v-model="row.needs" size="small"></ElInput>
      </ExtraTableColumn>

      <ExtraTableColumn prop="standard" label="标准" v-slot="{ row }">
        <ElSelect v-model="row.standard" size="small">
          <ElOption
            v-for="item in customers"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></ElOption>
        </ElSelect>
      </ExtraTableColumn>

      <ExtraTableColumn prop="mode" label="型号" v-slot="{ row }">
        <ElSelect v-model="row.mode" size="small">
          <ElOption
            v-for="item in extraModes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></ElOption>
        </ElSelect>
      </ExtraTableColumn>

      <ExtraTableColumn prop="spec" label="实际规格" v-slot="{ row }">
        <ElSelect v-model="row.spec" size="small">
          <ElOption
            v-for="item in specs"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></ElOption>
        </ElSelect>
      </ExtraTableColumn>

      <ExtraTableColumn prop="reel" label="线轴" v-slot="{ row }">
        <ElSelect v-model="row.reel" size="small">
          <ElOption
            v-for="item in reels"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></ElOption>
        </ElSelect>
      </ExtraTableColumn>

      <ExtraTableColumn prop="dish" label="组盘方式" v-slot="{ row }">
        <ElSelect v-model="row.dish" size="small">
          <ElOption
            v-for="item in dishs"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></ElOption>
        </ElSelect>
      </ExtraTableColumn>

      <ExtraTableColumn prop="date" label="交付日期" width="200px">
      </ExtraTableColumn>

      <ExtraTableColumn prop="pack" label="包装方式" v-slot="{ row }">
        <ElSelect v-model="row.pack" size="small">
          <ElOption
            v-for="item in packs"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></ElOption>
        </ElSelect>
      </ExtraTableColumn>

      <ExtraTableColumn prop="mark" label="备注" v-slot="{ row }">
        <ElInput
          v-model="row.mark"
          size="small"
          v-slot="{ row }"
        ></ElInput>
      </ExtraTableColumn>

      <ExtraTableColumn
        operation
        label="操作"
        width="260px"
      ></ExtraTableColumn>
    </ExtraTable>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {
  ExtraTable,
  TableColumn,
  ColumnInput,
} from '../components/extra-table/index';

import {
  TableColumn as ExtraTableColumn,
  ColumnInput as ExtraInput,
  ExtraCheckbox,
  ExtraDatePicker,
  ExtraSelect,
} from '../components/extra-table/index';
import { text } from 'stream/consumers';

import { Plus, CirclePlusFilled } from '@element-plus/icons-vue';

const tableData = ref([
  {
    name: '王五',
    age: 18,
    checkbox: false,
    datetime: new Date(),
    select: '选项三',
    state: 'solid',
    status: 0,
  },
  // { name: 'zhangsan', age: 18, state: 'edit', status: 'edit' },
  // { name: 'lisi', age: 35, state: 'solid', status: 'solid' },
]);

// setTimeout(() => {
//   tableData.value = [
//     { name: '王五', age: 18, state: 'solid', status: 0 },
//     { name: 'zhangsan', age: 18, state: 'edit', status: 1 },
//     { name: 'lisi', age: 35, state: 'solid', status: 2 },
//   ];
// }, 1000);

const formRules = {
  name: {
    validate: () => {},
    message: '姓名不能为空',
    trigger: ['input'],
  },
};

const handleCheck = () => {
  // console.log('handleCheck');
};

const handleAdd = () => {
  // console.log('add');
};

const stateMethod = (stateValue: any) => {
  const states = ['view', 'edit', 'solid'];
  return states[stateValue];
};

const handleAddCallback = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'add', age: 30, state: 'edit' });
    }, 1000);
  });
};

// select-options

const options = [
  { value: '选项一', label: '选项一' },
  { value: '选项二', label: '选项二' },
  { value: '选项三', label: '选项三' },
];

const customers = [
  { label: '芜湖美芝', value: '芜湖美芝' },
  { label: '聚芯制造', value: '聚芯制造' },
];

const extraPriorities = [
  { label: 100, value: 100 },
  { label: 50, value: 50 },
  { label: 0, value: 0 },
];

const extraModes = [
  { label: 'xyz123', value: 'xyz123' },
  { label: 'abc321', value: 'abc321' },
];

const specs = [
  { label: '0.58', value: '0.58' },
  { label: '0.02', value: '0.02' },
  { label: '0.025', value: '0.025' },
];
const reels = [
  { label: 'idk12', value: 'idk12' },
  { label: 'pt200', value: 'pt200' },
];
const dishs = [
  { label: '2*2', value: '2*2' },
  { label: '4*4', value: '4*4' },
];
const packs = [
  { label: '木托', value: '木托' },
  { label: '纸箱', value: '纸箱' },
];

const extraList = [
  {
    index: 1,
    orderCode: 123,
    priority: 100,
    needs: 5000,
    standard: '芜湖美芝',
    mode: 'abc/13',
    spec: '0.025',
    reel: 'idk12',
    dish: '2*2',
    date: new Date().toLocaleDateString(),
    pack: '木托',
    mark: '',
  },
];
</script>

<style scoped></style>
